<template>
  <ContentWrap>
    <el-table v-loading="listLoading" :data="list" :show-overflow-tooltip="true">
      <el-table-column label="定义编号" prop="id" min-width="270" />
      <el-table-column label="流程名称" prop="name" min-width="130" />
      <el-table-column label="流程图标" min-width="60">
        <template #default="{ row }">
          <div class="flex items-center">
            <el-image v-if="row.icon" :src="s_file_url(row.icon)" class="h-24px w-24px rounded" />
            <div v-else class="flow-icon">
              <span style="font-size: 12px; color: #fff">{{ subString(row.name, 0, 2) }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="是否可见" prop="visible" width="80">
        <template #default="{ row }">
          <dict-tag :options="common_bool_type" :value="row.visible" />
        </template>
      </el-table-column>
      <el-table-column label="发起权限" prop="startUserIds" min-width="120">
        <template #default="{ row }">
          <el-text v-if="!row.startUsers?.length"> 全员</el-text>
          <el-text v-else-if="row.startUsers.length === 1">
            {{ row.startUsers[0].nickname }}
          </el-text>
          <el-text v-else>
            <el-tooltip
              class="box-item"
              effect="dark"
              placement="top"
              :content="row.startUsers.map((user: any) => user.nickname).join('、')"
            >
              {{ row.startUsers[0].nickname }}等 {{ row.startUsers.length }} 人可发起
            </el-tooltip>
          </el-text>
        </template>
      </el-table-column>
      <el-table-column label="流程分类" prop="categoryName" width="120" />
      <el-table-column label="表单信息" prop="formType" min-width="130">
        <template #default="scope">
          <el-button
            v-if="scope.row.formType === BpmModelFormTypeEnum.Normal"
            type="primary"
            link
            @click="handleFormPreview(scope.row)"
          >
            <span>{{ scope.row.formName }}</span>
          </el-button>
          <el-button
            v-else-if="scope.row.formType === BpmModelFormTypeEnum.Custom"
            type="primary"
            link
            @click="handleFormPreview(scope.row)"
          >
            <span>{{ scope.row.formCustomCreatePath }}</span>
          </el-button>
          <label v-else>暂无表单</label>
        </template>
      </el-table-column>
      <el-table-column label="流程版本" min-width="60">
        <template #default="scope">
          <el-tag disable-transitions>v{{ scope.row.version }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="部署时间" prop="deploymentTime" width="180" />
      <el-table-column label="操作" width="70">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="openModelForm(scope.row.id)"
            v-hasPermi="['bpm:model:update']"
          >
            恢复
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </ContentWrap>

  <!-- 弹窗：表单详情 -->
  <Dialog title="表单详情" v-model="formPreviewVisible">
    <form-create :rule="formPreview.rule" :option="formPreview.option" />
  </Dialog>
</template>

<script setup lang="ts">
import { ProcessDefinitionApi, ProcessDefinitionInfoVO } from '@/api/bpm/process_definition'
import { setFormConfAndFields } from '@/utils/formCreate'
import { FormVO } from '@/api/bpm/form'
import { BpmModelFormTypeEnum } from '@/utils/constants'
import { s_file_url, subString } from '@/utils/lizard'
import { DICT_TYPE } from '@/utils/dict'

defineOptions({ name: 'BpmProcessDefinition' })

const { push } = useRouter() // 路由
const { params } = useRoute() // 查询参数
const { common_bool_type } = useBoolDict(DICT_TYPE.common_bool_type)

const listLoading = ref(true) // 列表的加载中状态
const list = ref<FormVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  key: params.key,
  pageNo: 1,
  pageSize: 10
})

/** 查询列表 */
const getList = async () => {
  listLoading.value = true
  try {
    const data = await ProcessDefinitionApi.getProcessDefinitionPage(queryParams)
    list.value = data.content
    total.value = data.totalElement
  } finally {
    listLoading.value = false
  }
}

const openModelForm = async (id?: string) => {
  await push({
    name: 'BpmModelUpdate',
    params: { type: 'definition', id }
  })
}

/** 流程表单的详情按钮操作 */
const formPreviewVisible = ref(false)
const formPreview = ref({
  rule: [],
  option: {}
})
const handleFormPreview = async (definition: ProcessDefinitionInfoVO) => {
  if (definition.formType == BpmModelFormTypeEnum.Normal) {
    setFormConfAndFields(formPreview, definition.formConf, definition.formFields, true)
    formPreviewVisible.value = true
  } else {
    await push({ path: definition.formCustomCreatePath })
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>

<style scoped lang="scss">
.flow-icon {
  display: flex;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  background-color: var(--el-color-primary);
  border-radius: 0.25rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
</style>
